<template>
  <div class="page">
    <div class="headers">
      <div class="headersIcon">
        <i class="iconfont h-icon-maimeng iconCss"></i>
        <i class="iconfont h-icon-xueren iconCss"></i>
        <i class="iconfont h-icon-maimeng iconCss"></i>
        <i class="iconfont h-icon-xueren iconCss"></i>
        <i class="iconfont h-icon-maimeng iconCss"></i>
        <i class="iconfont h-icon-xueren iconCss"></i>
      </div>
      <div class="tabsList">
        <i class="iconfont h-icon-xueren iconCss"></i>
        <a-tag color="blue" class="tags">
          {{ newMenuName }}
        </a-tag>
        <i class="iconfont h-icon-maimeng iconCss iconRight"></i>
      </div>
      <div class="headersIcon">
        <i class="iconfont h-icon-maimeng iconCss"></i>
        <i class="iconfont h-icon-xueren iconCss"></i>
        <i class="iconfont h-icon-maimeng iconCss"></i>
        <i class="iconfont h-icon-xueren iconCss"></i>
        <i class="iconfont h-icon-maimeng iconCss"></i>
        <i class="iconfont h-icon-xueren iconCss"></i>
      </div>
      <div class="buttons">
        <a-button
          @click="startTap"
          type="primary"
          :icon="!spinning ? 'bulb' : 'loading'"
          :disabled="spinning"
          style="width: 19%"
          >{{ index >= 1 && !spinning ? '不喜欢的话，换个呗~' : '启动' }}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { timeFix } from '@/utils/util'
import { menuList } from '@/enums/menuListEnum'
export default {
  name: 'DiningPool',
  data() {
    return {
      spinning: false,
      //菜单库
      menusList: menuList,
      interval: null,
      //菜名
      newMenuName: '----',
      index: 0,
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  methods: {
    //启动
    startTap() {
      this.spinning = true
      this.$message.success(timeFix() + ',干饭星人，冲~')
      this.index++
      const _that = this
      this.interval = setInterval(() => {
        var index = _that.random(0, _that.menusList.length - 1)
        _that.menusList.filter((e) => {
          _that.newMenuName = _that.menusList[index]
        })
      }, 100)
      setTimeout(() => {
        this.$message.success(`当前摇中的是${this.newMenuName}喔~`)
        this.spinning = false
        clearInterval(this.interval)
      }, 6666)
    },
    random(min, max) {
      return parseInt(Math.random() * (max + 1 - min) + min)
    },
  },
}
</script>

<style lang='less' scoped>
.page {
  width: 100%;
  height: 100%;
  .headers {
    margin-bottom: 24px;
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    .tabsList {
      display: flex;
      flex-direction: row;
      .tags {
        width: 250px;
        height: 60px;
        font-size: 35px;
        align-items: center;
        justify-content: center;
        display: flex;
      }
    }
    .iconCss {
      font-size: 42px;
      padding-right: 24px;
      //   animation: backgroundmove 8s infinite; //这里是动态闪烁的css
    }
    @keyframes backgroundmove {
      50% {
        // background: #84bf96 bottom right/250px 250px;
      }
    }
    .iconRight {
      padding-left: 10px;
    }
    .headersIcon {
      display: flex;
    }
    .buttons {
      padding: 12px 0;
      .cancelButton {
        left: 20px;
      }
    }
  }
}
</style>